<template>
	<div class="box">
		<div class="xbox">
			<div style="font-size: 50rpx; font-weight: bold;">鹤鸣</div>
			<div></div>
		</div>
		<div class="xbox">
			<div>
				<uni-fav
					style="display: inline-block;"
					:checked="checkList"
					class="favBtn"
					:circle="true"
					bg-color="#dd524d"
					bg-color-checked="#007aff"
					fg-color="#ffffff"
					fg-color-checked="#ffffff"
					@click="favClick(2)"
				/>
			</div>
		</div>
		<div class="xbox xbox_img"><img src="http://rco8i11co.hn-bkt.clouddn.com/login_user.png" alt="" class="user_img" /></div>
		<div class="xbox" style="height: 150rpx;border-radius: 20rpx;box-sizing: border-box;border-radius: 10rpx;">
			<div class="user" style="color:darkgray;">权益属性：</div>
			<div class="user">版权品</div>
			<div class="user" style="color: darkgray;">作家：</div>
			<div class="user" style="">
				<img src="http://rco8i11co.hn-bkt.clouddn.com/login_user.png" alt="" class="userlog" />
				<div style="margin-left: 20rpx;">name</div>
			</div>
		</div>
		<div class="xbox" style="font-size:40rpx;color:red;">￥5,000.00</div>
		<navigator url="/pages/Orderdetail/Orderdetail?id=1">
			<div class="xbox"><button class="shopping">立即购买</button></div>
		</navigator>
		<div class="xbox" style="padding:0 30rpx;box-sizing: border-box;">
			<div class="hs">发售方：</div>
			<div>于诗诗</div>
		</div>
		<div class="xbox">
			<div>认证信息</div>
			<div></div>
		</div>
		<div class="xbox" style="border-radius: 20rpx;border: 1px solid darkgray;height: 200rpx;">
			<div class="left_text hs">合约地址</div>
			<div class="left_right">asdfkhjg</div>
			<div class="left_text hs">认真标识</div>
			<div class="left_right">skldf</div>
			<div class="left_text hs">认证标准</div>
			<div class="left_right">asldkf</div>
			<div class="left_text hs">认证网络</div>
			<div class="left_right">lkasd</div>
		</div>
		<div class="xbox">
			<div style="width:240rpx;background-color:red; margin-top:50rpx;display: inline-block;height: 10rpx; "></div>
			<div style="width:100rpx;color: red;display: inline-block;">商品详情</div>
			<div style="width:240rpx;background-color:red; margin-top:50rpx;display: inline-block;height: 10rpx; "><hr /></div>
		</div>
		<div class="xbox" style="border-top: 2rpx solid black;">
			<div class="btn_box">
				<div class="btn_xbox">
					<h4>权益通知</h4>
					<p
						style="word-wrap: break-word;
	word-break: break-all;"
					>
						一、Opengate数字藏品权益须知:著作权人同意，在交易完成后，您将获得该数字艺术品除人身权利外的其他著作权(包括复制权、发行权、出租权、展览权、表演权、放映权、广播权、信息网络传播权、摄制权、改编权、翻译权、汇编权等)。特别提示:如您有意对该数字艺术品进行商用许可、授权等，建议您与著作权人订立书面的"著作权转让协议"并进行著作权转让备案登记。
						<br />
						二、Opengate数字藏品权益须知:发售方同意并承诺，在交易完成后，您即享有对该数字艺术品 进行占有、使用、处分的权利。特别提示:您对
						该数字艺术品的占有、使用、处分不得侵犯作者著作权，即您只能以合理的或著作权人可预见的方式展示、展览、汇编该数字资产中载有的作品，亦可向其他人转让该数字艺术品。如您需要对该数字艺术品做出复制、出租、改编、放映、广播或进行网络传播等涉及作品著作权授权的行为，您应获得著作权人的相应授权，并订立相关的协议。
					</p>
				</div>
				<div class="btn_xbox">
					<h4>单品介绍</h4>
					<p
						style="word-wrap: break-word;
	word-break: break-all;"
					>
						从未想过死谷的色彩会有如此的斑斓，方式大自然偷偷的在地球隐秘的角落隐藏了彩蛋，能给发现他手笔的人们些启发。
					</p>
				</div>
				<div class="btn_xbox">
					<h2>购买需知</h2>
					<p
						style="word-wrap: break-word;
	word-break: break-all;"
					>
						为更好服务Opengate数字藏品平台的各位用户，Opengate特此公告数字蒙品的二次交易细则。鉴于不同属性的数字艺术的二次交易细则各有不同，请各位用户务必审慎阅读并同意相关规则后
						进行相应操作，以免造成不必要损失。
						<br />
						1、依据我国法律要求，特定条件下的数字藏品的二次交易不支持任何形式的变相炒作，我们坚决反对数字藏品炒作、场外交易、欺诈，或以任何其他非法、侵权方式使用的违法违规行为，请大家注意甄别上述涉嫌网络欺诈的行为及其相关
						风险。
						<br />
						2、数字藏品为虚拟数字商品，购买前请先完成 实名认证。
						<br />
						3、本商品一经售出不支持退换。
					</p>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	onLoad: function(options) {
		console.log(options.id);
	},

	data() {
		return {
			checkList: false
		};
	},

	methods: {
		favClick(index) {
			this.checkList = !this.checkList;
			console.log(this.checkLis);
			this.$forceUpdate();
		}
	}
};
</script>

<style lang="scss">
.box {
	width: 100%;
	background-color: rgb(250, 250, 250);
	.xbox {
		margin: 0 auto;
		margin-top: 20rpx;
		font-size: 20rpx;
		width: 90%;
		line-height: 100rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		.btn_box {
			width: 90%;
			margin: 0 auto;
			background-color: white;
			padding-top: 20rpx;
			.btn_xbox {
				padding: 50rpx 50rpx;
				width: 80%;
				line-height: 40rpx;
				background-color: rgb(221, 221, 221);
				border-radius: 20rpx;
				margin: 50rpx auto;
			}
		}
		.left_text {
			box-sizing: border-box;
			width: 49%;
			height: 50rpx;
			line-height: 50rpx;
			padding-left: 20rpx;
			text-align: left;
		}
		.left_right {
			box-sizing: border-box;
			width: 49%;
			height: 50rpx;
			line-height: 50rpx;
			padding-right: 20rpx;
			text-align: right;
		}
		.hs {
			font-size: 30rpx;
			color: darkgray;
		}
		.shopping {
			width: 100%;
			height: 100rpx;
			border-radius: 50rpx;
			color: white;
			font-size: 50rpx;
			line-height: 100rpx;
			background-color: red;
		}
		.user {
			width: 49%;
			height: 74rpx;
			line-height: 74rpx;

			display: flex;
			.userlog {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				border: 1rpx solid red;
				text-align: center;
				line-height: 74rpx;
			}
		}
	}
	.xbox_img {
		height: 500rpx;
		box-shadow: 1px 5px 4px black;
		padding-top: 100rpx;
		.user_img {
			width: 100%;
			height: 400rpx;
		}
	}   
    
}
</style>
